<template>
  <div>
    <div class="condiction">
      <el-form :inline="true">
        <el-form-item label="搜索账户">
          <el-input v-model="userName" placeholder="请输入账户"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="add el-icon-plus" @click="addMember">添加管理员</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="table-title">
        <span class="title">
          <i class="el-icon-notebook-2 el-icon--left"></i>管理员账户
        </span>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :highlight-current-row="true"
        :header-cell-style="tableHeaderColor"
      >
        <el-table-column prop="name" label="管理员账户" align="center"></el-table-column>
        <el-table-column prop="level" label="账户级别" align="center"></el-table-column>
        <el-table-column prop="date" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="modifyPassword(scope.$index, scope.row)"
              size="mini"
              type="primary"
            >修改密码</el-button>
            <el-button
              @click="setAuthority(scope.$index, scope.row)"
              size="mini"
              type="primary"
            >分配权限</el-button>
            <el-button @click="del(scope.$index, scope.row)" size="mini" type="primary">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style lang="less" scoped>
.condiction {
  width: 50%;
  margin: 0 auto;
}
.add {
  margin-left: 100px;
}

.table-title {
  height: 47px;
  line-height: 47px;
  padding: 0 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table-box {
  width: 90%;
  margin: 10px auto 0;
  border: 1px solid #ddd;
  //   margin-top: 30px;
}
.table-handler {
  padding: 5px 15px;
  text-align: right;
  .check-all {
    margin-right: 20px;
  }
}
</style>

<script>
export default {
  name: 'authority',
  data() {
    return {
      userName: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          level: '123'
        }
      ]
    }
  },
  methods: {
    /**
     * 查询按钮
     */
    search() {
      alert('search')
    },
    /**
     * 添加管理员
     */
    addMember() {
      alert('member')
    },
    modifyPassword(index, row) {
      alert('password')
    },
    setAuthority(index, row) {
      alert('setAuthority')
    },
    del(index, row) {
      alert('delete')
    },
     // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
    },
  }
}
</script>